<template>
  <el-container>
    <!-- 头部导航栏未下滑前 -->
    <div id="box"
         v-if="showPrise">
      <div id="logo">
        <img src="../assets/logo.png" />
        <span>瞪羚科技</span>
      </div>
      <div id="menu">
        <el-menu :default-active="this.$route.path"
                 class="el-menu-demo"
                 mode="horizontal"
                 background-color="#000"
                 text-color="#fff"
                 active-text-color="#0080ff">
          <el-menu-item @click="main_btn"
                        index="/main">首页</el-menu-item>
          <el-submenu index="/jieshao">
            <template slot="title">产品介绍</template>
            <el-menu-item v-for="(li,index) in project"
                          :key="index"
                          @click="jieshao_btn(li.id)">{{li.title}}</el-menu-item>
          </el-submenu>
          <el-menu-item @click="news_btn"
                        index="/news">瞪羚新闻</el-menu-item>
          <el-menu-item @click="recruit_btn"
                        index="/recruit">加入我们</el-menu-item>
          <el-menu-item>
            <el-button type="text">
              <img src="../assets/menu.png" />
            </el-button>
          </el-menu-item>
        </el-menu>
      </div>
    </div>
    <!-- 下滑后的导航栏 -->
    <div id="box1"
         v-if="showRentPrise">
      <div id="logo">
        <img src="../assets/logo2.png" />
        <span>瞪羚科技</span>
      </div>
      <div id="menu">
        <el-menu :default-active="this.$route.path"
                 class="el-menu-demo"
                 mode="horizontal"
                 background-color="#fff"
                 text-color="#000"
                 active-text-color="#0080ff">
          <el-menu-item @click="main_btn"
                        index="/main">首页</el-menu-item>
          <el-submenu index="/jieshao">
            <template slot="title">产品介绍</template>
            <el-menu-item v-for="(li,index) in project"
                          :key="index"
                          @click="jieshao_btn(li.id)">{{li.title}}</el-menu-item>
          </el-submenu>
          <el-menu-item @click="news_btn"
                        index="/news">瞪羚新闻</el-menu-item>
          <el-menu-item @click="recruit_btn"
                        index="/recruit">加入我们</el-menu-item>
          <el-menu-item>
            <el-button type="text">
              <img src="../assets/menu2.png" />
            </el-button>
          </el-menu-item>
        </el-menu>
      </div>
    </div>
    <div class="main"
         router>
      <router-view></router-view>
    </div>
    <el-footer>
      <h1>广西瞪羚科技有限公司</h1>
      <span>联系电话：0771-5615159</span><br />
      <span>地址：南宁市青秀区佛子岭路33号网易联合创新中心28栋一楼</span>
    </el-footer>
    <div id="down">
      <span>Copyright©2019广西瞪羚科技有限公司 All Right Reserved</span>
      <span> 南宁网安备 33011002013032号</span>
      <span>浙ICP备13032182号-1</span>
    </div>
  </el-container>
</template>

<script>
export default {
  name: 'App',
  components: {},
  data () {
    return {
      project: [],
      showPrise: true,
      showRentPrise: false,
      style: {
        color: '#fff',
        background: '#000',
      }
      //   opacity: 0,
    };
  },
  mounted () {
    window.addEventListener('scroll', this.windowScroll);
    this.getproject()
  },
  methods: {
    getproject () {
      var that = this
      this.$axios
        .get(`${this.baseURL}` + "/project/")
        .then((res) => {
          that.project = res.data.data;
        })
    },
    main_btn () {
      this.$router.push("/main")
      location.reload();
    },
    jieshao_btn (id) {
      this.$router.push({
        name: "jsxq",
        query: {
          id: id,
        },
      })
    },
    news_btn () {
      this.$router.push("/news")
      location.reload();
    },
    recruit_btn () {
      this.$router.push("/recruit")
      location.reload();
    },
    // handleSelect (key, keyPath) {

    // },
    windowScroll () {
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      this.opacity = Math.abs(Math.round(scrollTop)) / 400;
      if (this.opacity >= 1) {
        this.showPrise = false;
        this.showRentPrise = true;
      } else {
        this.showPrise = true;
        this.showRentPrise = false;
      }
    },
  },
  destroyed () {
    window.removeEventListener('scroll', this.windowScroll); //销毁滚动事件
  },
};
</script>

<style scoped>
#box {
  min-width: 700px;
  position: fixed;
  top: 0;
  left: 8%;
  right: 8%;
  background-color: #000;
  color: #fff;
  box-shadow: 13px 12px 70px 0px rgba(65, 77, 128, 0.22);
  z-index: 999;
}
#box1 {
  min-width: 700px;
  position: fixed;
  top: 0;
  left: 8%;
  right: 8%;
  background-color: #fff;
  color: #000;
  box-shadow: 13px 12px 70px 0px rgba(65, 77, 128, 0.22);
  z-index: 999;
}
#logo {
  display: flex;
  align-items: center;
  padding-left: 37px;
  float: left;
}
#logo img {
  padding-top: 16px;
}
#logo span {
  margin-left: 25px;
  margin-top: 18px;
  font-size: 18px;
  display: inline-flex;
  align-items: center;
}
#logo {
  display: flex;
  align-items: center;
  padding-left: 37px;
  float: left;
}
.el-menu-item {
  margin: 0 8px !important;
}
.el-menu.el-menu--horizontal {
  border-bottom: 0 !important;
}
#menu {
  float: right;
  padding-right: 3%;
}
.el-button img {
  width: 28px;
}
.main {
  color: #333;
}
.el-footer {
  min-height: 248px !important;
  color: #fff;
  background-color: #011436;
  padding-left: 15%;
}
.el-footer h1 {
  font-size: 22px;
  padding-top: 65px;
  color: #fff;
  padding-bottom: 30px;
}
.el-footer span {
  font-size: 15px;
  line-height: 41px;
}
#down {
  text-align: center;
  background-color: black;
  padding: 26px 0;
  color: #fff;
  width: 100%;
}
#down span {
  margin-left: 60px;
  font-size: 14px;
}
</style>